<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>Update CSS Skills with <span class="h1">js</span> </h2>
    <div class="controls">
        <lable for="spacing">Spacing</lable>
        <input type="range" min="10" max="200" id="spacing" name="spacing" value="10" data-sizing="px"> <span id="spacing__res"></span>
    </div>
    <div class="fields">
        <lable for="blur">blur</lable>
        <input type="range" min="0" max="25" id="blur" name="blur" value="10" data-sizing="px"> <span id="blur__res"></span>
    </div>
    <div class="fields">
        <lable for="blur">blur</lable>
        <input type="color" min="0" max="25" id="color" name="color" value="#ffc600" data-sizing="px"> <span id="color__res"></span>
    </div>
    <script>
        const inputs = document.querySelectorAll('.fields input');
        console.log(inputs);

        const spacingInput = document.querySelector('#spacing');
        const blurInput = document.querySelector('#blur');
        spacingInput.addEventListener('change', function(event) {
            //tihs 指向事件发生的对象
            // console.log(this.value);
            // console.log(event.target.value);
            document.querySelector('#spacing__res').innerText = this.value + this.dataset.sizing
        })
        blurInput.addEventListener('change', function(event) {

        })
        inputs.forEach(function(input) {
            input.addEventListener('change', function(event) {
                const res = '#' + this.id + '__res';
                document.querySelector(res).innerText = this.value + this.dataset.sizing;
            })

        })
    </script>
</body>

</html>